<template>
	<div id="" ref="wrp" class="wrp">
		<div id="" class="location">
			<location-header :cities="cities" :lcd="lcd"></location-header>
			<location-list :cities="cities" :hotCities="hotCities" :lcd="lcd"  :content="content"></location-list>
			<location-alp :alphabetList="alphabetList"    @change="getMes"></location-alp>
		</div>
	</div>
</template>

<script>
	import axios from "axios"
	import BScroll from 'better-scroll'
	import locationHeader from "./components/locationHeader.vue"
	import locationList from "./components/locationList.vue"
	import locationAlp from "./components/locationAlp.vue"
	export default{
		components:{
			locationHeader,
			locationList,
			locationAlp
		},
		data(){
			return{
				content:"",
				hotCities:[],
				cities:{},
				alphabetList:[],
				lcd:''
			}
		},
		methods:{
			getMes(content){
				this.content=content;
			},
			getData(){
				axios.get('api/city.json').then(this.getMesSucc)
			},
			getMesSucc(res){
//				console.log(res);
					res=res.data;
					if(res){
					const	data=res.data
  					this.hotCities=data.hotCities;
					this.cities=data.cities;
					this.alphabetList=data.alphabetList;
					}
			}
		},
		mounted(){
			this.getData();
				this.scroll = new BScroll(this.$refs.wrp,{
	     		click:true,
	      		mouseWheel:{
		       	 	speed:20,
		       		invert:false,
		       		easeTime:300
    		 	 }
   		});
		}
	}
</script>

<style lang="stylus" scoped="scoped">
.wrp
	position:absolute
	top:0;
	left:0;
	bottom:0;
	width: 100%;
	background:#f2f4f7
</style>